<template>
<div id="menu">
    <a-menu v-model="current" @click="to" :mode="mode">
      <template v-for="item of menu" >
        <a-sub-menu v-if="item.child&&item.child.length" :key="item.url" popupClassName="menu-bar-popup">
          <template #title>{{item.name}}</template>
            <a-menu-item v-for="subItem of item.child" :key="item.url+'-'+subItem.url">
              <!-- <nuxt-link :to="{name:'products'}">产品展示</nuxt-link> -->
              {{subItem.name}}
            </a-menu-item>
        </a-sub-menu>
        <a-menu-item v-else :key="item.url">
          {{item.name}}
          <!-- <nuxt-link :to="{name:'index'}">{{item.name}}</nuxt-link> -->
        </a-menu-item>
      </template>
    </a-menu>
</div>
</template>

<script>
import { computed } from 'vue';
export default {
    name:'Menu',
    props:{
        type:String,
        default:'pc'
    },
    data() {
        return {
            current:['mail'],
            menu:[
                {
                    name:'首页',
                    url:'index',
                },
                {
                    name:'产品中心',
                    url:'products',
                },
                {
                    name:'我们的业务',
                    url:'business',
                },
                {
                    name:'关于我们',
                    url:'aboutus',
                    child:[
                        {
                            name:'企业介绍',
                            url:'company',
                        },
                        {
                            name:'企业文化',
                            url:'culture',
                        },
                        {
                            name:'发展历程',
                            url:'development',
                        },
                        {
                            name:'企业风采',
                            url:'gloria',
                        },
                    ]
                },
            ]
        };
    },
    created() {
        let path = this.$route.name
        this.current = [path]
    },
    watch:{
        $route: {
            handler(route) {
                let path = route.name
                this.current = [path]
            },
            deep:true,
            immediate: true,
        },
    },
    computed:{
        mode(){
            return this.type=='phone'?'inline':'horizontal'
        },
    },
    methods:{
        to({item, key, keyPath}){
            let path = key
            this.$emit('handle')
            this.$router.push({name:path})
        }
    }
};
</script>

<style lang="less">
#menu .ant-menu.ant-menu-horizontal{
    background: none;
    color:rgb(255, 255, 255);
    box-shadow: none;
    border-bottom:none;
    .ant-menu-item,.ant-menu-submenu{
      border-bottom:none;
      margin:0 4px;
      padding:0 12px;
      &:before,.ant-menu-submenu-title:before {
        position: absolute;
        content: "";
        top:auto;
        left: 0;
        bottom: 0;
        height: 3px;
        border-radius: 3px;
        width: 0%;
        background: @primary-color;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        transition: all 0.4s ease;
      }
    }
    .ant-menu-item.ant-menu-item-selected,.ant-menu-item.ant-menu-item-active,
    .ant-menu-submenu.ant-menu-submenu-selected,.ant-menu-submenu.ant-menu-submenu-active{
      &:before,.ant-menu-submenu-title::before {
        width: 100%;
        opacity: 1;
        visibility: visible;
      }
    }
    >.ant-menu-item:not(.ant-menu-item-selected,.ant-menu-item-active) > a{
      color:rgb(255, 255, 255);
    }
}
.menu-bar-popup .ant-menu.ant-menu-vertical.ant-menu-sub {
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(8px);
    overflow: hidden;
    padding: 8px;
   &:not(.ant-menu-horizontal) .ant-menu-item-selected,
   &:not(.ant-menu-horizontal) .ant-menu-item-active {
      background-color: #e6f7ff;
    }
    .ant-menu-item{
      border-radius: 4px;
    }
  }

</style>
